<template>
  <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
    <div class="site-navbar__header" style="border: 0;">
      <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })" style="background: #fff;">
        <img v-show="sidebarFold" src="~@/assets/img/slogo.png" style="width: 32px; height: 32px; display: block; margin: 0 auto;" alt="">
        <img v-show="!sidebarFold" src="~@/assets/img/houtai-logo.png" style="width: 182px; height: 32px; display: block; margin: 0 auto;" alt="">
      </h1>
    </div>

    <div class="site-navbar__body clearfix">
      <!-- 折叠按钮 -->
      <el-menu
        class="site-navbar__menu"
        mode="horizontal">
        <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
          <icon-svg name="zhedie"></icon-svg>
        </el-menu-item>
      </el-menu>

      <el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
        <el-menu-item index="1" class="realEstate">
          <a href="http://responsivemarketingfunnel.com/estate/index.html" target="_blank" class="links">MY REAL ESTATE</a>
        </el-menu-item>

        <el-menu-item index="1" class="helps">
          <a href="http://responsivemarketingfunnel.com/estate/index.html" target="_blank" class="links">HELP</a>
        </el-menu-item>

        <!-- 设置 -->
        <!-- <el-menu-item index="2" @click="$router.push({ name: 'theme' })">
          <template slot="title">
              <icon-svg name="shezhi" class="el-icon-setting"></icon-svg>
          </template>
        </el-menu-item> -->

        <el-menu-item class="site-navbar__avatar ruserinfo" index="3">
          <el-dropdown :show-timeout="0" placement="bottom">
            <span class="el-dropdown-link nms">
              <img src="~@/assets/img/avatar.png" :alt="userName">{{ userName }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="updatePasswordHandle()">Change Password</el-dropdown-item>
              <el-dropdown-item @click.native="logoutHandle()">Logout</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
  </nav>
</template>

<script>
  import UpdatePassword from './main-navbar-update-password'
  import { clearLoginInfo } from '@/utils'
  export default {
    data () {
      return {
        updatePassowrdVisible: false
      }
    },
    components: {
      UpdatePassword
    },
    computed: {
      navbarLayoutType: {
        get () { return this.$store.state.common.navbarLayoutType }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold },
        set (val) { this.$store.commit('common/updateSidebarFold', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      userName: {
        get () { return this.$store.state.user.name }
      }
    },
    methods: {
      // 修改密码
      updatePasswordHandle () {
        this.updatePassowrdVisible = true
        this.$nextTick(() => {
          this.$refs.updatePassowrd.init()
        })
      },
      // 退出
      logoutHandle () {
        var _this = this
        _this.$confirm({//这个confirm是antUI的
          title: 'Determine to do the [Logout] operation?',
          content: '',
          onOk() {
            console.log('----- 用户主动退出 -----');
            _this.$http({
              url: _this.$http.adornUrl('/sys/logout'),
              method: 'post',
              data: _this.$http.adornData()
            }).then(({data}) => {
              if (data && data.code === 0) {
                clearLoginInfo()
                _this.$router.push({ name: 'login' })
              }
            })
          },
          onCancel() {
            console.log('----- 用户取消退出 -----');
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.realEstate,
.helps {
  padding: 0 14px 0 20px;
  .links {
    font-size: 16px;
    font-weight: bold;
    color: rgba(24,144,255,1);
    &:hover {
      color: #1890FF;
    }
  }
}
.helps {
  padding: 0 20px 0 14px;
  margin-right: 39px;
}

.ruserinfo {
  .nms {
    font-size: 16px;
    font-weight: bold;
    color: rgba(24,144,255,1);
  }
}

.site-navbar__body {
  padding-right: 70px;
}

.site-navbar {
  height: 61px;
  box-shadow: none;
  border-bottom: 1px solid #EBF1FF;
}
.site-navbar__header {
  // width: 240px;
  height: 60px;
  border-bottom: 1px solid #D2D6DF;
}
.site-navbar__brand {
  // width: 240px;
  height: 60px;
  line-height: 60px;
}

</style>
